<template>

<div id="box">
    <div class="topnav">
        <div class="top">
        <div class="iconfont icon-jiantou" @click="goHome"></div>  
      <p>巡演详情</p>
   <span  class="iconfont icon-shouye"></span>
   </div>
    </div>
    <div class="center">
        <dt>
            <img :src="detailList.mobile_col_img" alt="">
            <div class="blur_bj"> 
            <img :src="detailList.mobile_col_img" alt="">
            </div>
            <div class="blur_bj_gray"></div>
        </dt>
        <dd>
            <h1>{{ detailList.name }}</h1>
            <p>{{ detailList.city_num}}个城市 | <span>{{detailList.show_num}}场演出</span></p>
            <em>{{endTime()}}</em>
        </dd>
    </div>
    
</div>

</template>

<script>

import { mapState } from 'vuex'
import Vue from 'vue';

export default {
 data () {
return {
}
 },
 computed:{
    ...mapState('detaillist',['detailList']),
      endTime(){
            return function(){
                let endTim=this.detailList.end_time*1000;
                let startTim=this.detailList.start_time*1000;
                let endTime=new Date(endTim)
                let endstr='';
                endstr=endTime.getFullYear()+'.'+endTime.getMonth()+"."+endTime.getDate()
                let startTime=new Date(startTim)
                let startstr='';
                startstr=startTime.getFullYear()+'.'+startTime.getMonth()+"."+startTime.getDate()
                return startstr+'-'+endstr
            }
        }
},
methods:{
    goHome(){
        this.$router.push({path:'../../main'})
    }
}
}
</script>

<style lang='scss' scoped>

#box{
    width:100%;
    height: 4.25rem;
    position: relative;
    overflow: hidden;
    .top{
        display: flex;
        justify-content:space-between;
        p{
            width:2.0rem;  
            // -webkit-box-sizing: border-box;
            // box-sizing: border-box;
            font-size: 0.38rem;
            color: #fefefe;
        }
    }
}
.center{
    display:flex;
    justify-content: space-between;
}
dt{
    width: 2.93333rem;
    height: 3.4rem;
    border-radius: 0.10667rem;
    // overflow: hidden;
    img{
        width:100%;
        height:100%;
    }
}
  .blur_bj {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        z-index: -2;
        -webkit-filter: blur(5px);
        filter: blur(15px);
        transform: scale(1.2);
        }
 .blur_bj img {
            width: 100%;
            height: 120%;
        }
  .blur_bj_gray {
            position: absolute;
            height: 100%;
            width: 100%;
            top: 0;
            background: rgba(0,0,0,.2);
            z-index: -1;
            opacity: 0.5;
        }
dd{
    width:60%;
    display:flex;
    justify-content: space-around;
    flex-direction: column;
}
 .icon-jiantou{
    width:1.06667rem;  
    // -webkit-box-sizing: border-box;
    // box-sizing: border-box;
    font-size: 0.48rem;
    color: #fefefe;
    // color: blue;
 }
 .icon-shouye{
    width:1.06667rem;  
    // -webkit-box-sizing: border-box;
    // box-sizing: border-box;
    font-size: 0.48rem;
    color: #fefefe;
 }
 h1{
     color: #fefefe;
    font-size: 0.33667rem;
    line-height: 0.66667rem;
    // overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    // display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: normal;

 }
 p{
     
    font-size: 0.37333rem;
    color: rgba(254,254,254,0.7);
    // margin-top: 0.4rem;background:blue;

 }
 em{
    // position: absolute;
    // left: 0.4rem;
    // bottom: 0.13333rem;
    font-size: 0.42667rem;
    color: #fefefe;
    line-height: 0.64rem;
    font-weight: normal;
 }
</style>
